
<!DOCTYPE html>
<html lang="zh-cn">

<head><meta name="generator" content="Hexo 3.8.0">
    <title>
        特别说明 - Admui 开发文档</title>
    <meta charset="utf-8">
    <meta name="keywords" content="admui,admui官网,admui框架,通用后台管理系统,后台框架,ui框架">
    <meta name="description" content="Admui 是一个基于最新 Web 技术的企业级通用管理系统快速开发框架，可以帮助企业极大的提高工作效率，节省开发成本，提升品牌形象">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!--[if lte IE 9]>
    <meta http-equiv="refresh" content="0; url='http://www.admui.com/ie'" />
    <![endif]-->
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Admui">
    <meta name="msapplication-TileImage" content="http://cdn.admui.com/site/img/app/icon-72@x2.png">
    <meta name="msapplication-TileColor" content="#395b81">
    <link rel="apple-touch-icon-precomposed" href="http://cdn.admui.com/site/img/app/icon-72@x2.png">
    <link rel="shortcut icon" href="http://cdn.admui.com/site/img/app/favicon.png">
    <meta name="msapplication-TileColor" content="#62a8ea">
    <script>
        window.PAGE_TYPE = "ui"
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?cd758c4c82a4964836712308cb782b12";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <link rel="stylesheet" href="http://cdn.admui.com/docs/v2/css/page.css">
</head>

<body>
    <div id="mobile-bar">
        <a class="menu-button"></a>
        <a class="logo" href="../../pjax/index.html">Admui开发文档</a>
        <select class="version-select">
            <option value="basic">基础版</option>
            <option value="pjax">pjax版</option>
            <option value="iframe" selected>iframe版</option>
        </select>
    </div>
    <div id="header">
    <a id="logo" href="../../pjax/index.html">
        <img src="http://cdn.admui.com/docs/images/logo.svg"> <span>Admui 开发文档</span>
    </a>
    <select class="version-select">
        <option value="basic">基础版</option>
        <option value="pjax">pjax版</option>
        <option value="iframe" selected>iframe版</option>
    </select>
    <ul id="nav">
        <li>
    <a href="../index.html" class="nav-link">首页</a>
</li>
<li>
    <a href="../guide/index.html" class="nav-link">介绍</a>
</li>
<li>
    <a href="index.html" class="nav-link current">UI</a>
</li>
<li>
    <a href="../java/index.html" class="nav-link">JAVA</a>
</li>
<li>
    <a href="../logs/index.html" class="nav-link">更新日志</a>
</li>
<li>
    <a href="../1.x/index.html" class="nav-link">v1版本</a>
</li>

    </ul>
</div>
    
    <div id="main" class="fix-sidebar">
        
        
<div class="sidebar">
    <ul class="main-menu">
        <li>
    <a href="../index.html" class="nav-link">首页</a>
</li>
<li>
    <a href="../guide/index.html" class="nav-link">介绍</a>
</li>
<li>
    <a href="index.html" class="nav-link current">UI</a>
</li>
<li>
    <a href="../java/index.html" class="nav-link">JAVA</a>
</li>
<li>
    <a href="../logs/index.html" class="nav-link">更新日志</a>
</li>
<li>
    <a href="../1.x/index.html" class="nav-link">v1版本</a>
</li>

    </ul>
    <div class="list">
        <ul class="menu-root">
            
            <li>
                <a href="index.html" class="sidebar-link ">
                    基本概述</a>
            </li>
            
            <li>
                <a href="themes.html" class="sidebar-link ">
                    主题说明</a>
            </li>
            
            <li>
                <a href="build.html" class="sidebar-link ">
                    构建工具</a>
            </li>
            
            <li>
                <a href="files.html" class="sidebar-link ">
                    入口文件</a>
            </li>
            
            <li>
                <a href="structure.html" class="sidebar-link ">
                    模板结构</a>
            </li>
            
            <li>
                <a href="hello-world.html" class="sidebar-link ">
                    Hello world</a>
            </li>
            
            <li>
                <a href="style.html" class="sidebar-link ">
                    自定义样式</a>
            </li>
            
            <li>
                <a href="javascript.html" class="sidebar-link ">
                    Javascript 方法</a>
            </li>
            
            <li>
                <a href="description.html" class="sidebar-link current ">
                    特别说明</a>
            </li>
            
            <li>
                <a href="components.html" class="sidebar-link ">
                    UI 组件</a>
            </li>
            
            <li>
                <a href="plugins.html" class="sidebar-link ">
                    第三方插件</a>
            </li>
            
            <li>
                <a href="icons.html" class="sidebar-link ">
                    字体图标</a>
            </li>
            
            <li>
                <a href="code-guide.html" class="sidebar-link ">
                    编码规范</a>
            </li>
            
        </ul>
    </div>
</div>

<div class="content ui with-sidebar">
    <h1>特别说明</h1>
    <p>由于iframe的特殊机制，在页面中使用iframe通常会伴生一些常见问题，主要表现为：</p>
<ol>
<li>iframe页面与父框架之间的通信(如跨框架传值，在iframe页面中打开主体框架的页签等)问题；</li>
<li>浏览器地址栏URL动态响应问题；</li>
<li>自定义弹层组件(及类弹层组件)的显示及通信问题。</li>
</ol>
<p>iframe父子框架之间的通信问题可参考 <a href="javascript.html">JS 模块</a> 中提供的方法，更为具体的示例（如跨框架传值）可参考示例的源代码。</p>
<h2 id="URL动态响应"><a href="#URL%E5%8A%A8%E6%80%81%E5%93%8D%E5%BA%94" class="headerlink" title="URL动态响应"></a>URL动态响应</h2><p>Admui-iframe 对地址栏的URL动态响应已经做了处理，主要表现为：</p>
<ol>
<li>打开 iframe 页面时，地址栏URL根据 iframe 页面的URL动态变化；</li>
<li>通过URL可直接打开对应标签页。</li>
</ol>
<h2 id="弹层组件"><a href="#%E5%BC%B9%E5%B1%82%E7%BB%84%E4%BB%B6" class="headerlink" title="弹层组件"></a>弹层组件</h2><p>通常来说，在当页面中引用的iframe没有占满当前页面时，在 iframe 中使用弹层组件（如自定义的模态框），会严重影响体验，如下图：</p>
<p><img src="http://cdn.admui.com/docs/images/iframe-1.gif" alt="Admui示例1"></p>
<p>Admui-iframe版本中，将弹层改为在最外层主体页面弹出，如下图：</p>
<p><img src="http://cdn.admui.com/docs/images/iframe-2.gif" alt="Admui示例2"></p>
<p>为了实现如上效果，Admui-iframe 对 Bootstrap 的 modal 插件及 Layer、Toastr 等插件做了优化。</p>
<h3 id="Modal-插件"><a href="#Modal-%E6%8F%92%E4%BB%B6" class="headerlink" title="Modal 插件"></a>Modal 插件</h3><p>Admui-iframe 对 Bootstrap 的 Modal 插件进行了优化，并增加了一些参数</p>
<h4 id="参数"><a href="#%E5%8F%82%E6%95%B0" class="headerlink" title="参数"></a>参数</h4><p><code>global (Boolean)</code> : 默认为<code>true</code>，模态框在父框架中显示，为 <code>false</code> 时模态框在当前iframe框架中显示<br><code>page</code> : 模态框中iframe页面的地址<br><code>pageHeight</code> : 模态框中iframe高度</p>
<h4 id="使用场景"><a href="#%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF" class="headerlink" title="使用场景"></a>使用场景</h4><ol>
<li><p>Modal 默认在主体框架中显示，如果您需要在内容页面(iframe)中显示，可以配置 <code>global: false</code>，也可以 <code>data-api</code> 使用，如：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span></span></span><br><span class="line"><span class="tag">    <span class="attr">type</span>=<span class="string">"button"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">class</span>=<span class="string">"btn btn-primary"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">data-target</span>=<span class="string">"#modal-iframe"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">data-toggle</span>=<span class="string">"modal"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">data-global</span>=<span class="string">"false"</span>&gt;</span></span><br><span class="line">    在iframe中显示</span><br><span class="line"><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>Modal 中如果使用了第三方插件或自定义样式，建议以 iframe 的形式创建模态框，避免出现样式或插件文件在主体框架中出现找不到的情况。此时可以配合 <code>page</code> 和 <code>pageHeight</code>参数使用。可参考 <a href="http://iframe.demo.admui.com/#!/components/basic/modals" target="_blank" rel="noopener">模态框页面</a> 示例页面中的 <code>在模态框中显示IFRAME页面</code></p>
</li>
</ol>
<h3 id="Layer-弹层"><a href="#Layer-%E5%BC%B9%E5%B1%82" class="headerlink" title="Layer 弹层"></a>Layer 弹层</h3><ol>
<li>Layer 在主体框架或内容页面（iframe）中显示主要区别于使用哪个页面中的 <code>layer</code> 对象。我们在主体框架和内容页面中都引用了layer.js文件，需要Layer 弹层在主体框架显示时在iframe中使用 <code>parent.layer</code> 对象，需要layer弹层在内容页面显示时直接使用 <code>layer</code> 对象。</li>
<li>Admui-iframe 增加了layer对 <code>data-api</code> 的简单支持，您可以在<a href="http://iframe.demo.admui.com/#!/components/advanced/layer" target="_blank" rel="noopener">layer 弹层</a>页面下方查看其示例。</li>
</ol>
<h3 id="Toastr-全局通知"><a href="#Toastr-%E5%85%A8%E5%B1%80%E9%80%9A%E7%9F%A5" class="headerlink" title="Toastr 全局通知"></a>Toastr 全局通知</h3><p>Toastr 是一个消息提示的插件，Admui-iframe 对其进行了优化，让其始终在主体框架中显示。</p>

    
    <div class="page-links">
        
        <span><a href="javascript.html">&lang; 上一页：Javascript 方法</a></span>
        
        
        <span style="float:right"><a href="plugins.html">下一页：第三方插件 &rang;</a></span>
        
    </div>
    
    <div class="footer">
    &copy; 2015-2018
    <a href="http://www.admui.com/">Admui</a>
    ·
    上海畅控
</div>
</div>

        
    </div>
    

    <script src="https://cdn.staticfile.org/smooth-scroll/14.2.1/smooth-scroll.min.js"></script>
    <script src="http://cdn.admui.com/docs/common/js/common.js"></script>

    <script src="https://cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            FastClick.attach(document.body);
        }, false);
        (function () {
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
    </script>

</body>

</html>